<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 class="dv-dec-10" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
                        <div class="title">
                            <span class="title-text">{{ title }}</span>
                            <!-- <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> -->
                        </div>
                        <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColors" />
                    </div>
                    <dv-decoration-10 class="dv-dec-10-s" />
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex aside-width">
                        <div class="react-right bg-color-blue mr-3" @click="shou">
                            <span class="text fw-b">数据监控</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao">
                            <span class="text fw-b">政务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao2">
                            <span class="text fw-b">事项办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao3">
                            <span class="text fw-b">诉求治理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao4">
                            <span class="text fw-b">调节分析</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao5">
                            <span class="text fw-b">新媒体监管</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao6">
                            <span class="text fw-b">新媒体监管11</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao7">
                            <span class="text fw-b">服务大厅</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao8">
                            <span class="text fw-b">服务办件</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao9">
                            <span class="text fw-b">交易政务</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao10">
                            <span class="text fw-b">服务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao11">
                            <span class="text fw-b">督查考核</span>
                        </div>
                    </div>
                </div>

                <div class="body-box">
                    <!-- 第三行数据 -->
                    <div class="content-box">
                        <div class="left">
                            <div class="left-1">
                                <dv-border-box-12 style="height: 280px;width: 450PX;">
                                    <div style="font-size: 20px;padding: 25PX 20PX;">调节概况</div>
                                    <div class="mediation-cards">
                                        <dv-border-box-10 class="card-border" style="width: 80%;">
                                            <div class="mediation-card">
                                                <div class="card-icon card-icon-case">🔰</div>
                                                <div class="card-content">
                                                    <div class="card-value">{{ mediationData.caseTotal }}</div>
                                                    <div class="card-label">案件总量</div>
                                                </div>
                                            </div>
                                        </dv-border-box-10>
                                        <dv-border-box-10 class="card-border" style="width: 80%;">
                                            <div class="mediation-card">
                                                <div class="card-icon card-icon-success">✅</div>
                                                <div class="card-content">
                                                    <div class="card-value">{{ mediationData.successTotal }}</div>
                                                    <div class="card-label">成功总量</div>
                                                </div>
                                            </div>
                                        </dv-border-box-10>
                                        <dv-border-box-10 class="card-border" style="width: 80%;">
                                            <div class="mediation-card">
                                                <div class="card-icon card-icon-amount">💰</div>
                                                <div class="card-content">
                                                    <div class="card-value">{{ mediationData.agreementAmount }}</div>
                                                    <div class="card-label">协议金额</div>
                                                </div>
                                            </div>
                                        </dv-border-box-10>
                                        <dv-border-box-10 class="card-border" style="width: 80%;">
                                            <div class="mediation-card">
                                                <div class="card-icon card-icon-judicial">⚖️</div>
                                                <div class="card-content">
                                                    <div class="card-value">{{ mediationData.judicialConfirmation }}
                                                    </div>
                                                    <div class="card-label">司法确认</div>
                                                </div>
                                            </div>
                                        </dv-border-box-10>
                                    </div>
                                </dv-border-box-12>
                            </div>

                            <div class="left-2">
                                <dv-border-box-12 style="height: 300px;width: 450PX;">
                                    <div style="font-size: 20px;padding: 25PX 20PX;">司法所概况</div>

                                    <div class="flex">
                                        <div class="flex1" style="width:142px;">
                                            <div class="judicial-station">
                                                <div class="number-display">999</div>
                                                <div class="icon-container">
                                                    <div class="station-icon">
                                                        <div class="building-icon">
                                                            <div class="building-top">
                                                                <div class="roof-triangle"></div>
                                                                <div class="roof-base"></div>
                                                            </div>
                                                            <div class="building-body">
                                                                <div class="window"></div>
                                                                <div class="door"></div>
                                                            </div>
                                                        </div>
                                                        <div class="document-stack">
                                                            <div class="document"></div>
                                                            <div class="document"></div>
                                                            <div class="document"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="title-text">司法所数量</div>
                                            </div>
                                        </div>
                                        <div class="flex2" style="width: 300px;;
                                         height: 230px;">
                                            <div id="biao1" style="width: 100%;height: 100%;"></div>
                                        </div>
                                    </div>


                                </dv-border-box-12>
                            </div>

                            <div class="left-3">
                                <dv-border-box-12 style="height: 350px;width: 450PX;">
                                    <div style="font-size: 20px;padding: 25PX 20PX;">司法所概览</div>
                                    <div
                                        style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; padding: 15px 25px;">
                                        <div
                                            style="background-color: rgba(59, 130, 246, 0.3); padding: 15px; text-align: center; border-radius: 8px; height: 120px; display: flex; flex-direction: column; justify-content: center; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2);">
                                            <div
                                                style="font-size: 36px; font-weight: bold; color: #3b82f6; margin-bottom: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);">
                                                999</div>
                                            <div
                                                style="font-size: 16px; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);">
                                                矫正对象</div>
                                        </div>
                                        <div
                                            style="background-color: rgba(59, 130, 246, 0.3); padding: 15px; text-align: center; border-radius: 8px; height: 120px; display: flex; flex-direction: column; justify-content: center; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2);">
                                            <div
                                                style="font-size: 36px; font-weight: bold; color: #3b82f6; margin-bottom: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);">
                                                9999</div>
                                            <div
                                                style="font-size: 16px; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);">
                                                安置帮教对象</div>
                                        </div>
                                    </div>
                                    <div
                                        style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 0 25px 15px 25px;">
                                        <div
                                            style="background-color: rgba(59, 130, 246, 0.3); padding: 15px; text-align: center; border-radius: 8px; height: 100px; display: flex; flex-direction: column; justify-content: center; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2);">
                                            <div
                                                style="font-size: 36px; font-weight: bold; color: #3b82f6; margin-bottom: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);">
                                                777</div>
                                            <div
                                                style="font-size: 16px; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);">
                                                法制宣传</div>
                                        </div>
                                        <div
                                            style="background-color: rgba(59, 130, 246, 0.3); padding: 15px; text-align: center; border-radius: 8px; height: 100px; display: flex; flex-direction: column; justify-content: center; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2);">
                                            <div
                                                style="font-size: 36px; font-weight: bold; color: #3b82f6; margin-bottom: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);">
                                                666</div>
                                            <div
                                                style="font-size: 16px; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);">
                                                依法治理</div>
                                        </div>
                                        <div
                                            style="background-color: rgba(59, 130, 246, 0.3); padding: 15px; text-align: center; border-radius: 8px; height: 100px; display: flex; flex-direction: column; justify-content: center; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2);">
                                            <div
                                                style="font-size: 36px; font-weight: bold; color: #3b82f6; margin-bottom: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);">
                                                111</div>
                                            <div
                                                style="font-size: 16px; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);">
                                                矛盾化解</div>
                                        </div>
                                    </div>
                                </dv-border-box-12>
                            </div>
                        </div>


                        <div class="center">
                            <div class="center-1">
                                <dv-flyline-chart-enhanced :dev="true" :config="config"
                                    style="display: block;margin: 0 auto;width:900px;height:700px;" />
                            </div>

                            <div class="center-2">
                                <div class="center2-1">
                                    <dv-border-box-13 style="height: 280px;width: 480PX;">
                                        <div style="font-size: 20px;padding: 25PX 20PX;">基础公共法律服务
                                        </div>

                                        <div class="law">
                                            <div class="law-1">
                                                <div>
                                                    <span
                                                        style="font-size: 32px; font-weight: bold; margin-bottom: 5px; display: block;">9999</span>
                                                    <div style="font-size: 16px; color: #ffffff;">法制咨询</div>
                                                </div>
                                                <div>
                                                    <span
                                                        style="font-size: 32px; font-weight: bold; margin-bottom: 5px; display: block;">5555</span>
                                                    <div style="font-size: 16px; color: #ffffff;">法制服务</div>
                                                </div>
                                                <div>
                                                    <span
                                                        style="font-size: 32px; font-weight: bold; margin-bottom: 5px; display: block;">7777</span>
                                                    <div style="font-size: 16px; color: #ffffff;">村居法律顾问</div>
                                                </div>
                                            </div>
                                            <div class="law-2">

                                                <div id="biao2" style="width: 100%;height: 100%;"></div>

                                            </div>
                                        </div>

                                    </dv-border-box-13>
                                </div>

                                <div class="center2-2">
                                    <dv-border-box-13 style="height: 280px;width: 450PX;">
                                        <div style="font-size: 20px;padding: 25PX 20PX;">年度调解业务量
                                        </div>
                                        <div id="biao3" style="width: 100%;height: 74%;"></div>
                                    </dv-border-box-13>
                                </div>
                            </div>
                        </div>



                        <div class="right">

                            <div class="right-1">
                                <dv-border-box-12 style="height: 280px;width: 450PX;">
                                    <div style="font-size: 20px;padding: 25PX 20PX;">区域概括</div>
                                    <div class="region-cards">
                                        <dv-border-box-10 class="card-border">
                                            <div class="region-card">
                                                <div class="card-icon card-icon-case special-icon">
                                                    <div style="font-size: 20px; color: #fff; font-weight: bold;">m²
                                                    </div>
                                                </div>
                                                <div class="card-content">
                                                    <div class="card-value">1234567</div>
                                                    <div class="card-label">案件总量</div>
                                                </div>
                                            </div>
                                        </dv-border-box-10>
                                        <dv-border-box-10 class="card-border">
                                            <div class="region-card">
                                                <div class="card-icon card-icon-success">🏢</div>
                                                <div class="card-content">
                                                    <div class="card-value">12345</div>
                                                    <div class="card-label">成功总量</div>
                                                </div>
                                            </div>
                                        </dv-border-box-10>
                                        <dv-border-box-10 class="card-border">
                                            <div class="region-card">
                                                <div class="card-icon card-icon-amount">🏡</div>
                                                <div class="card-content">
                                                    <div class="card-value">1234567</div>
                                                    <div class="card-label">协议金额</div>
                                                </div>
                                            </div>
                                        </dv-border-box-10>
                                        <dv-border-box-10 class="card-border">
                                            <div class="region-card">
                                                <div class="card-icon card-icon-judicial">👥</div>
                                                <div class="card-content">
                                                    <div class="card-value">1234567</div>
                                                    <div class="card-label">司法确认</div>
                                                </div>
                                            </div>
                                        </dv-border-box-10>
                                    </div>
                                </dv-border-box-12>
                            </div>


                            <div class="right-2">
                                <dv-border-box-12 style="height: 300px;width: 450PX;">
                                    <div style="font-size: 20px;padding: 25PX 20PX;">调节概况</div>

                                    <div class="pie">
                                        <div class="pie-1">
                                            <div class="number-display">66</div>
                                            <div class="icon-container">
                                                <div class="person-icon">
                                                    <div class="avatar-stack">
                                                        <div class="top-row">
                                                            <div class="avatar"></div>
                                                            <div class="avatar"></div>
                                                            <div class="avatar"></div>
                                                        </div>
                                                        <div class="bottom-row">
                                                            <div class="avatar"></div>
                                                            <div class="avatar"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="people-stack">
                                                    <div class="person-dot"></div>
                                                    <div class="person-dot"></div>
                                                    <div class="person-dot"></div>
                                                    <div class="person-dot"></div>
                                                </div>
                                            </div>
                                            <div class="title-text">调委会数量</div>
                                        </div>
                                        <div class="pie-2" style="width: 300px;;
                                         height: 230px;">
                                            <div id="biao4" style="width: 100%;height: 100%;"></div>
                                        </div>

                                    </div>


                                </dv-border-box-12>

                            </div>


                            <div class="right-3">
                                <dv-border-box-12 style="height: 350px;width: 450px;">
                                    <div style="font-size: 20px;padding: 20px;">调解概况</div>

                                    <div class="legal-grid">
                                        <!-- 第一行 -->
                                        <div class="grid-row">
                                            <div class="grid-item">
                                                <div class="title-column">法律服务站</div>
                                                <div class="data-column">
                                                    <div class="data-row">
                                                        <div class="data-number">333</div>
                                                        <div class="data-text">机构总数</div>
                                                    </div>
                                                    <div class="data-row">
                                                        <div class="data-number">666</div>
                                                        <div class="data-text">咨询员</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="grid-item">
                                                <div class="title-column">法律法务室</div>
                                                <div class="data-column">
                                                    <div class="data-row">
                                                        <div class="data-number">333</div>
                                                        <div class="data-text">机构总数</div>
                                                    </div>
                                                    <div class="data-row">
                                                        <div class="data-number">666</div>
                                                        <div class="data-text">咨询员</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 第二行 -->
                                        <div class="grid-row">
                                            <div class="grid-item">
                                                <div class="title-column">法律顾问</div>
                                                <div class="data-column">
                                                    <div class="data-row">
                                                        <div class="data-number">333</div>
                                                        <div class="data-text">机构总数</div>
                                                    </div>
                                                    <div class="data-row">
                                                        <div class="data-number">666</div>
                                                        <div class="data-text">咨询员</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="grid-item">
                                                <div class="title-column">村居法律顾问</div>
                                                <div class="data-column">
                                                    <div class="data-row">
                                                        <div class="data-number">333</div>
                                                        <div class="data-text">机构总数</div>
                                                    </div>
                                                    <div class="data-row">
                                                        <div class="data-number">666</div>
                                                        <div class="data-text">咨询员</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 底部人员信息 -->
                                    <div class="personnel-row">
                                        <div class="personnel-item">
                                            <span>人民调解员</span>
                                            <span class="personnel-number">200</span>
                                        </div>
                                        <div class="personnel-item">
                                            <span>人民陪审员</span>
                                            <span class="personnel-number">200</span>
                                        </div>
                                    </div>
                                </dv-border-box-12>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    reactive,
    onMounted,
    onUnmounted,
} from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import CenterLeft1 from '../centerLeft1/index.vue'
import CenterLeft2 from '../centerLeft2/index.vue'
import Center from '../center/index.vue'
import CenterRight1 from '../centerRight1/index.vue'
import CenterRight2 from '../centerRight2/index.vue'
import BottomLeft from '../bottomLeft/index.vue'
import BottomRight from '../bottomRight/index.vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
export default defineComponent({


    data() {
        return {
            config: {
                points: [
                    {
                        name: '郑州',
                        coordinate: [0.48, 0.35],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '新乡',
                        coordinate: [0.52, 0.23],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '焦作',
                        coordinate: [0.43, 0.29],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '开封',
                        coordinate: [0.59, 0.35],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '许昌',
                        coordinate: [0.53, 0.47],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '平顶山',
                        coordinate: [0.45, 0.54],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '洛阳',
                        coordinate: [0.36, 0.38],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '周口',
                        coordinate: [0.62, 0.55],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '漯河',
                        coordinate: [0.56, 0.56],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '南阳',
                        coordinate: [0.37, 0.66],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '信阳',
                        coordinate: [0.55, 0.81],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '驻马店',
                        coordinate: [0.55, 0.67],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '济源',
                        coordinate: [0.37, 0.29],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '三门峡',
                        coordinate: [0.20, 0.36],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '商丘',
                        coordinate: [0.76, 0.41],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '鹤壁',
                        coordinate: [0.59, 0.18],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '濮阳',
                        coordinate: [0.68, 0.17],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    },
                    {
                        name: '安阳',
                        coordinate: [0.59, 0.10],
                        itemStyle: {
                            color: '#000000' 
                        },
                        halo: {
                            show: true, 
                            color: '#00ff00', 
                            radius: 15, 
                            duration: 2000 
                        },
                    }
                ],
                lines: [
                    {
                        source: '新乡',
                        target: '郑州'
                    },
                    {
                        source: '焦作',
                        target: '郑州'
                    },
                    {
                        source: '开封',
                        target: '郑州'
                    },
                    {
                        source: '周口',
                        target: '郑州',
                        color: '#fb7293',
                        width: 2
                    },
                    {
                        source: '南阳',
                        target: '郑州',
                        color: '#fb7293',
                        width: 2
                    },
                    {
                        source: '济源',
                        target: '郑州'
                    },
                    {
                        source: '三门峡',
                        target: '郑州'
                    },
                    {
                        source: '商丘',
                        target: '郑州'
                    },
                    {
                        source: '鹤壁',
                        target: '郑州'
                    },
                    {
                        source: '濮阳',
                        target: '郑州'
                    },
                    {
                        source: '安阳',
                        target: '郑州'
                    },
                    {
                        source: '许昌',
                        target: '南阳',
                        color: '#37a2da'
                    },
                    {
                        source: '平顶山',
                        target: '南阳',
                        color: '#37a2da'
                    },
                    {
                        source: '洛阳',
                        target: '南阳',
                        color: '#37a2da'
                    },
                    {
                        source: '驻马店',
                        target: '周口',
                        color: '#8378ea'
                    },
                    {
                        source: '信阳',
                        target: '周口',
                        color: '#8378ea'
                    },
                    {
                        source: '漯河',
                        target: '周口',
                        color: '#8378ea'
                    }
                ],
                icon: {
                    show: true,
                    src: 'https://cdn8.axureshop.com/demo2025/2328232/images/05__%E6%94%BF%E5%8A%A1%E8%B0%83%E8%A7%A3%E5%88%86%E6%9E%90%E5%A4%A7%E5%B1%8F/u2920.png'
                },
                handle: {
                    show: true,
                },
                text: {
                    show: true,
                },
                // k: 0.5,
                bgImgSrc: 'https://cdn8.axureshop.com/demo2025/2328232/images/05__%E6%94%BF%E5%8A%A1%E8%B0%83%E8%A7%A3%E5%88%86%E6%9E%90%E5%A4%A7%E5%B1%8F/u2920.png'
            }
        }
    },


    components: {
        CenterLeft1,
        CenterLeft2,
        Center,
        CenterRight1,
        CenterRight2,
        BottomLeft,
        BottomRight,
    },

    setup() {
        // * tab切换 颜色背景改变
        const lastChar = location.href.substr(location.href.length - 1)
        const tabColor = ref(lastChar)
        // * 颜色
        const decorationColors = ['#568aea', '#000000']
        // * 加载标识
        const loading = ref<boolean>(true)
        // * 时间内容
        const timeInfo = reactive({
            setInterval: 0,
            dateDay: '',
            dateYear: '',
            dateWeek: ''
        })

        // 调解概况数据
        const mediationData = reactive({
            caseTotal: 123956,
            successTotal: 12624,
            agreementAmount: 345810,
            judicialConfirmation: 3619
        })

        const router = useRouter()
        //路由跳转
        const shou = () => {
            router.push("/")
            console.log("跳转成功");
        }

        const tiao = () => {
            router.push("/wzh2")
            console.log("跳转成功");
        }

        const tiao2 = () => {
            router.push("/wzh3")
        }

        const tiao3 = () => {
            router.push("/sjk")
        }

        const tiao4 = () => {
            router.push("/sjk1")
        }
        const tiao5 = () => {
            router.push("/sjk2")
        }
        const tiao6 = () => {
            router.push("/mhr1")
        }
        const tiao7 = () => {
            router.push("/mhr2")
        }
        const tiao8 = () => {
            router.push("/mhr3")
        }
        const tiao9 = () => {
            router.push("/st1")
        }
        const tiao10 = () => {
            router.push("/st2")
        }
        const tiao11 = () => {
            router.push("/st3")
        }



        const initTu1 = () => {
            var chartDom = document.getElementById('biao1');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    // top: '5%',
                    // left: 'center'
                    orient: 'vertical',
                    right: '5%',
                    top: 'center',
                    textStyle: {
                        color: '#FFFFFF'
                    }
                },

                series: [
                    {
                        type: 'pie',
                        left: '-40%',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '{d}%',
                            fontSize: 14,
                            color: '#ffffff',
                            fontWeight: 'bold'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: 24,
                                fontWeight: 'bold',
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 350, name: '民事案件 ', itemStyle: { color: '#ff99cc' } },
                            { value: 350, name: '刑事案件', itemStyle: { color: '#cccccc' } },
                            { value: 150, name: '行政案件', itemStyle: { color: '#99ccff' } },
                            { value: 150, name: '其他案件', itemStyle: { color: '#ccff99' } }
                        ],
                    },
                ]
            };

            option && myChart.setOption(option);

        }

        const Tu2 = () => {
            const chartDom = document.getElementById('biao2');
            if (!chartDom) return;
            const myChart = echarts.init(chartDom);
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b}: {c}'
                },
                grid: {
                    left: '0%',
                    right: '8%',
                    bottom: '5%',
                    top: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 12
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['代书文书', '法律咨询', '法律诉讼', '法律意见', '法律审查'],
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 12
                    }
                },
                series: [
                    {
                        data: [7123, 9200, 8430, 4520, 6211],
                        type: 'bar',
                        barWidth: '60%',
                        itemStyle: {
                            color: function (params) {
                                // 使用蓝色系渐变色
                                const gradients = [
                                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        { offset: 0, color: '#41a6f6' },
                                        { offset: 1, color: '#2980b9' }
                                    ]),
                                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        { offset: 0, color: '#5dade2' },
                                        { offset: 1, color: '#3498db' }
                                    ]),
                                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        { offset: 0, color: '#3498db' },
                                        { offset: 1, color: '#2e86c1' }
                                    ]),
                                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        { offset: 0, color: '#5dade2' },
                                        { offset: 1, color: '#2e86c1' }
                                    ]),
                                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        { offset: 0, color: '#41a6f6' },
                                        { offset: 1, color: '#2980b9' }
                                    ])
                                ];
                                return gradients[params.dataIndex];
                            },
                            borderRadius: [0, 4, 4, 0]
                        },
                        label: {
                            show: true,
                            position: 'right',
                            color: '#ffffff',
                            fontSize: 11
                        }
                    }
                ]
            };

            option && myChart.setOption(option);

            // 窗口 resize 适配
            const resizeHandler = () => {
                if (myChart && !myChart.isDisposed()) {
                    myChart.resize();
                }
            };
            window.addEventListener('resize', resizeHandler);

            // 在组件卸载时清理监听器和图表实例
            onUnmounted(() => {
                if (myChart && !myChart.isDisposed()) {
                    myChart.dispose();
                }
                window.removeEventListener('resize', resizeHandler);
            });
        }


        const Tu3 = () => {
            // 初始化图表
            var chartDom = document.getElementById('biao3');
            if (!chartDom) return;
            var myChart = echarts.init(chartDom);
            // 配置项
            var option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b}<br/>{c} 件'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 12,
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '单位: 件',
                    nameTextStyle: {
                        color: '#e6e6e6',
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#4c596c'
                        }
                    },
                    axisLabel: {
                        color: '#e6e6e6',
                        fontSize: 12
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    }
                },
                series: [
                    {
                        data: [4500, 3800, 3200, 3800, 2800, 3500, 3800, 4200, 3800, 3500, 2800, 2200],
                        type: 'bar',
                        barWidth: '40%',
                        itemStyle: {
                            color: function (params) {
                                // 基于数值的渐变色
                                // 每个柱子内部从上到下的黄色到绿色渐变
                                const baseGradient = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FFD700' },
                                    { offset: 1, color: '#00ff88' }
                                ]);
                                const colors = [baseGradient, baseGradient, baseGradient, baseGradient, baseGradient, baseGradient];
                                const index = Math.floor((params.value / 5000) * colors.length);
                                return colors[Math.min(index, colors.length - 1)];
                            },
                            borderRadius: [0, 0, 0, 0]
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
            // 窗口 resize 适配
            const resizeHandler = () => {
                if (myChart && !myChart.isDisposed()) {
                    myChart.resize();
                }
            };
            window.addEventListener('resize', resizeHandler);

            // 在组件卸载时清理监听器和图表实例
            onUnmounted(() => {
                if (myChart && !myChart.isDisposed()) {
                    myChart.dispose();
                }
                window.removeEventListener('resize', resizeHandler);
            });
        }


        const Tu4 = () => {
            var chartDom = document.getElementById('biao4');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    // top: '5%',
                    // left: 'center'
                    orient: 'vertical',
                    right: '5%',
                    top: 'center',
                    textStyle: {
                        color: '#FFFFFF'
                    }
                },

                series: [
                    {
                        type: 'pie',
                        left: '-40%',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '{d}%',
                            fontSize: 14,
                            color: '#ffffff',
                            fontWeight: 'bold'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: 24,
                                fontWeight: 'bold',
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 350, name: '民事案件', itemStyle: { color: '#00cc66' } },
                            { value: 350, name: '刑事案件', itemStyle: { color: '#ff3333' } },
                            { value: 150, name: '行政案件', itemStyle: { color: '#00ccff' } },
                            { value: 150, name: '其他案件', itemStyle: { color: '#ff9933' } }
                        ],
                    },
                ]
            };

            option && myChart.setOption(option);
        }








        // * 适配处理
        const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
        // 生命周期
        onMounted(() => {
            cancelLoading()
            handleTime()
            // todo 屏幕适应
            windowDraw()
            calcRate()
            setTimeout(() => {
                initTu1()
                Tu2()
                Tu3()
                Tu4()
            }, 500)
        })

        onUnmounted(() => {
            unWindowDraw()
            clearInterval(timeInfo.setInterval)
        })

        //点击颜色切换  路由跳转
        const tab = (index) => {
            // console.log(index)
            tabColor.value = index
            router.push(`/tab${index}`)
        }

        // methods
        // todo 处理 loading 展示
        const cancelLoading = () => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        }

        // todo 处理时间监听
        const handleTime = () => {
            timeInfo.setInterval = setInterval(() => {
                const date = new Date()
                timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
                timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
                timeInfo.dateWeek = WEEK[date.getDay()]
            }, 1000)
        }

        // return
        return {
            loading,
            timeInfo,
            appRef,
            title,
            subtitle,
            moduleInfo,
            tabColor,
            tab,
            tiao,
            tiao2,
            shou,
            tiao3,
            tiao4,
            tiao5,
            tiao6,
            tiao7,
            tiao8,
            tiao9,
            tiao10,
            tiao11,
            mediationData
        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

// 弹性容器样式
.content-box {
    display: flex;
    width: 100%;
    gap: 15px;
    padding: 10px;
}


.left {
    flex: 1;
    width: 100%;
    // border: 1px solid red;

    .left-2 {
        .flex {
            display: flex;
        }

        .judicial-station {
            width: 100%;
            height: 230px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;

            .number-display {
                font-size: 42px;
                font-weight: bold;
                color: #66ccff;
                text-align: center;
                position: relative;

                &::after {
                    content: '所';
                    font-size: 20px;
                    font-weight: normal;
                    color: rgba(255, 255, 255, 0.8);
                    position: absolute;
                    top: 0;
                    right: -25px;
                }
            }

            .icon-container {
                width: 100px;
                height: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, rgba(45, 117, 184, 0.6), rgba(74, 144, 226, 0.6));
                border-radius: 15px;
                border: 1px solid #00a0e9;
                position: relative;

                .station-icon {
                    width: 60px;
                    height: 60px;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .building-icon {
                        position: absolute;
                        bottom: 0;
                        width: 35px;
                        height: 40px;

                        .building-top {
                            position: relative;

                            .roof-triangle {
                                width: 0;
                                height: 0;
                                border-left: 18px solid transparent;
                                border-right: 18px solid transparent;
                                border-bottom: 15px solid #007bff;
                                position: absolute;
                                top: 0;
                                left: 50%;
                                transform: translateX(-50%);
                            }

                            .roof-base {
                                width: 35px;
                                height: 5px;
                                background: linear-gradient(90deg, #0056b3, #007bff);
                                position: absolute;
                                top: 15px;
                                border-left: 1px solid #00a0e9;
                                border-right: 1px solid #00a0e9;
                            }
                        }

                        .building-body {
                            position: absolute;
                            top: 20px;
                            width: 35px;
                            height: 20px;
                            background: linear-gradient(180deg, rgba(45, 117, 184, 0.8), rgba(74, 144, 226, 0.8));
                            border: 1px solid #00a0e9;
                            border-radius: 3px;

                            .window {
                                position: absolute;
                                top: 5px;
                                left: 50%;
                                transform: translateX(-50%);
                                width: 8px;
                                height: 6px;
                                background: rgba(255, 255, 255, 0.3);
                                border: 1px solid rgba(255, 255, 255, 0.5);
                                border-radius: 2px;
                            }

                            .door {
                                position: absolute;
                                bottom: 2px;
                                left: 50%;
                                transform: translateX(-50%);
                                width: 10px;
                                height: 12px;
                                background: linear-gradient(180deg, #0056b3, #007bff);
                                border-radius: 2px;
                                border: 1px solid #00a0e9;
                            }
                        }
                    }

                    .document-stack {
                        position: absolute;
                        top: 5px;
                        right: 5px;
                        display: flex;
                        flex-direction: column;
                        gap: 2px;

                        .document {
                            width: 12px;
                            height: 10px;
                            background: linear-gradient(90deg, #66ccff, #00a0e9);
                            border-radius: 2px;
                            border: 1px solid rgba(255, 255, 255, 0.5);
                            box-shadow: 0 0 3px rgba(102, 204, 255, 0.6);
                        }
                    }

                    // 下方平台效果
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -5px;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 50px;
                        height: 30px;
                        background: linear-gradient(180deg, rgba(45, 117, 184, 0.8), rgba(74, 144, 226, 0.8));
                        border: 1px solid #00a0e9;
                        border-radius: 5px;
                        z-index: 0;
                    }
                }
            }

            .title-text {
                font-size: 16px;
                color: rgba(255, 255, 255, 0.9);
                font-weight: bold;
                text-align: center;
            }
        }
    }

    .left-1 {

        // 调解概况卡片样式
        .mediation-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding: 10px;
            box-sizing: border-box;
            justify-content: center;
        }

        .card-border {
            height: 80px;
            box-sizing: border-box;
            margin: 0 auto;
        }

        .mediation-card {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 8px 10px;
            box-sizing: border-box;
            gap: 6px;
        }

        .card-content {
            min-width: 0;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .card-icon {
            font-size: 32px;
            margin-right: 8px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-icon-case {
            color: #ffa500;
        }

        .card-icon-success {
            color: #00ff00;
        }

        .card-icon-amount {
            color: #ffff00;
        }

        .card-icon-judicial {
            color: #ff69b4;
        }

        .card-value {
            font-size: 22px;
            font-weight: bold;
            color: #fff;
            line-height: 1.2;
        }

        .card-label {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.2;
            margin-top: 2px;
        }
    }
}

.center {
    flex: 2;
    // border: 1px solid yellow;
    width: 950px;


    .center-1 {
        height: 650px;
        // border: 1px solid red;
    }

    .center-2 {
        display: flex;
        justify-content: space-evenly;
        // border: 1px solid red;

        .center2-1 {
            height: 650px;
            // border: 1px solid green;

            .law {
                display: flex;

                .law-1 {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    width: 120px;
                    height: 201px;
                    align-items: center;
                }

                .law-1>div {
                    text-align: center;
                    padding: 5px 0;
                }

                .law-1>div span:first-child {
                    color: #5dade2;
                    font-size: 20px;
                }

                .law-2 {
                    // border: 1px solid blue;
                    width: 400px;
                    height: 201px;
                }
            }
        }
    }
}

.right {
    flex: 1;
    width: 100%;
    // border: 1px solid blue;
    width: 450px;

    .right-1 {

        .region-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding: 10px;
            box-sizing: border-box;
            justify-content: center;

            .card-border {
                height: 80px;
                box-sizing: border-box;
                margin: 0 auto;
                width: 80%;
            }

            .region-card {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                padding: 8px 10px;
                box-sizing: border-box;
                gap: 6px;
            }

            .card-icon {
                font-size: 32px;
                margin-right: 8px;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .special-icon {
                background-color: #144667;
                border: 2px solid #ff4c4c;
                position: relative;
                width: 40px;
                height: 40px;
            }

            .special-icon div {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .card-icon-case {
                color: #ffa500;
            }

            .card-icon-success {
                color: #00ff00;
            }

            .card-icon-amount {
                color: #ffff00;
            }

            .card-icon-judicial {
                color: #ff69b4;
            }

            .card-content {
                min-width: 0;
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100%;
            }

            .card-value {
                font-size: 22px;
                font-weight: bold;
                color: #fff;
                line-height: 1.2;
            }

            .card-label {
                font-size: 11px;
                color: rgba(255, 255, 255, 0.8);
                line-height: 1.2;
                margin-top: 2px;
            }
        }
    }

    .right-2 {
        .pie {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .pie-1 {
            width: 142px;
            height: 230px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;

            .number-display {
                font-size: 42px;
                font-weight: bold;
                color: #66ccff;
                text-align: center;
                position: relative;

                &::after {
                    content: '人';
                    font-size: 20px;
                    font-weight: normal;
                    color: rgba(255, 255, 255, 0.8);
                    position: absolute;
                    top: 0;
                    right: -25px;
                }
            }

            .icon-container {
                width: 100px;
                height: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, rgba(45, 117, 184, 0.6), rgba(74, 144, 226, 0.6));
                border-radius: 15px;
                border: 1px solid #00a0e9;
                position: relative;

                .person-icon {
                    width: 60px;
                    height: 60px;
                    position: relative;

                    // 头像堆叠效果
                    .avatar-stack {
                        position: absolute;
                        top: 8px;
                        left: 50%;
                        transform: translateX(-50%);

                        // 第一排头像
                        .top-row {
                            display: flex;
                            margin-bottom: 2px;

                            .avatar {
                                width: 18px;
                                height: 18px;
                                border-radius: 50%;
                                border: 1px solid rgba(255, 255, 255, 0.6);
                                background: linear-gradient(135deg, #66ccff, #00a0e9);
                                margin: 0 1px;
                                box-shadow: 0 0 6px rgba(102, 204, 255, 0.8);
                            }
                        }

                        // 第二排头像
                        .bottom-row {
                            display: flex;
                            justify-content: center;

                            .avatar {
                                width: 18px;
                                height: 18px;
                                border-radius: 50%;
                                border: 1px solid rgba(255, 255, 255, 0.6);
                                background: linear-gradient(135deg, #66ccff, #00a0e9);
                                margin: 0 1px;
                                box-shadow: 0 0 6px rgba(102, 204, 255, 0.8);
                            }
                        }
                    }

                    // 下方方块
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: 5px;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 50px;
                        height: 30px;
                        background: linear-gradient(180deg, rgba(45, 117, 184, 0.8), rgba(74, 144, 226, 0.8));
                        border: 1px solid #00a0e9;
                        border-radius: 5px;
                        z-index: 0;
                    }
                }

                .people-stack {
                    position: absolute;
                    bottom: 10px;
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .person-dot {
                        width: 8px;
                        height: 8px;
                        background-color: #66ccff;
                        border-radius: 50%;
                        margin: 1px;
                        box-shadow: 0 0 5px rgba(102, 204, 255, 0.8);
                    }

                    .person-dot:nth-child(1) {
                        margin-bottom: 3px;
                    }

                    .person-dot:nth-child(2) {
                        margin-bottom: 3px;
                    }
                }
            }

            .title-text {
                font-size: 16px;
                color: rgba(255, 255, 255, 0.9);
                font-weight: bold;
                text-align: center;
            }
        }
    }

    .right-3 {
        display: flex;
        flex-direction: column;
        height: 100%;

        .legal-grid {
            padding: 0 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;

            .grid-row {
                display: flex;
                gap: 20px;
                justify-content: center;

                .grid-item {
                    width: 170px;
                    display: flex;
                    background-color: rgba(28, 77, 129, 0.7);
                    border: 1px solid #00a0e9;
                    height: 100px;
                    box-sizing: border-box;

                    .title-column {
                        width: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: rgba(31, 92, 154, 0.9);
                        color: #fff;
                        font-size: 12px;
                        font-weight: bold;
                        writing-mode: vertical-lr;
                        text-orientation: mixed;
                        padding: 5px;
                        border-right: 1px solid #00a0e9;
                        box-sizing: border-box;
                    }

                    .data-column {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;
                        align-items: center;
                        padding: 5px;

                        .data-row {
                            display: flex;
                            flex-direction: column;
                            align-items: center;

                            .data-number {
                                font-size: 20px;
                                font-weight: bold;
                                color: #fff;
                                margin-bottom: 2px;
                            }

                            .data-text {
                                font-size: 12px;
                                color: rgba(255, 255, 255, 0.9);
                            }
                        }
                    }
                }
            }
        }

        .personnel-row {
            display: flex;
            gap: 20px;
            padding: 10px;
            margin-top: auto;
            justify-content: center;

            .personnel-item {
                width: 170px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 15px;
                background-color: rgba(28, 77, 129, 0.7);
                border: 1px solid #00a0e9;
                box-sizing: border-box;

                span {
                    color: #fff;
                    font-size: 14px;
                }

                .personnel-number {
                    font-size: 18px;
                    font-weight: bold;
                }
            }
        }
    }

}
</style>
